import React, { useState, useEffect } from 'react'
import { SearchBar, SideBar, Tag, Tabs } from 'antd-mobile'
import Header from '../../components/Header/Header'
import './cate.less'
import { reqcate, reqcategoods } from '../../request/api'
import { Link } from 'react-router-dom'
import { imgPre } from '../../request/http'

function Cate() {
  // constructor() {
  //   super()
  //   this.state = {
  //     cates: [],
  //     categoods:[],
  //     n: 1,
  //     names:'时令水果'
  //   }
  // }
  //  1.初始化数据
  const [cates, setCates] = useState([])
  const [n, setN] = useState(1)
  const [categoods, setCateGoods] = useState([])
  // 请求
  useEffect(() => {
    // 分类
    reqcate().then(res => {
      if (res.data.code == 200) {
        setCates(res.data.list)
      }
      // 分类商品
      requestList(res.data.list[0].id)
    })
  }, [])
  
  const requestList = n => {
    reqcategoods({ fid: n }).then(res => {
      if (res.data.code == 200) {
        setCateGoods(res.data.list)
      }
    })
  }
  return (
    <div>
      <Header title={'商品分类'} back></Header>

      <div className='search'>
        <SearchBar
          placeholder='请输入内容'
          style={{
            '--border-radius': '100px',
            '--background': '#ffffff',
            '--height': '32px',
            '--padding-left': '12px',
          }}
        />
      </div>
      {/* <div>{n}</div> */}
      <div className='catelist'>
        <ul>
          {cates.map((item, index) => (
            <li key={item.id}
              onClick={() => {requestList(item.id);setN(item.id)}}
              className={item.id == n ? 'active' : ''}
            >{item.catename}</li>
          ))}
        </ul>
      </div>

      {/* 商品 */}
      <div className="goodcate">

        {/* <h3>{names}</h3> */}
        {categoods.map(item => {
          return (
            <div className='cates' key={item.id}>
              <img src={imgPre + item.img} alt="" />
              <ul>
                <li><h3>{item.goodsname}</h3></li>
                <li>
                  <span>￥{item.price}<i>￥{item.market_price}</i></span>
                  <Link to={"/"}>加入购物车</Link>
                </li>
                <li className='qx'>999人已付款，99.99%的好评</li>
              </ul>
            </div>
          )
        })}

      </div>
    </div>
  )

}

export default Cate